<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
  Created by IntelliJ IDEA.
  User: 12103
  Date: 2021/10/19
  Time: 17:42
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <%@include file="/view/common/head.jsp"%>
    <link rel="stylesheet" href="static/css/cart.css">
    <title>购物车页面</title>

</head>
<body>
    <div class="header">
        <div class="top">
            <div class="left_top">
                <a href="index.jsp">
                    <img src="static/image/logo.jpeg" alt="">
                </a>
            </div>
            <%@ include file="/view/common/public.jsp"%>
        </div>
    </div>
    <div class="main">
        <table class="show_body">
            <thead>
            <tr>
                <th>商品名称</th>
                <th>商品数量</th>
                <th>商品单价</th>
                <th>商品金额</th>
                <th>操作</th>
            </tr>
            </thead>
            <c:if test="${not empty sessionScope.cart.items}">
                <tbody>
                <c:forEach items="${sessionScope.cart.items}" var="entry">
                    <tr>
                        <td>${entry.value.name}</td>
                        <td>
                            <input class="id" type="hidden" value="${entry.value.id}">
                            <input class="count" type="hidden" value="${entry.value.count}">
                            <input class="updateCount" type="text" value="${entry.value.count}" style="width: 80px;text-align: center;border-radius: 0;height: 20px;border: 1px solid black;">
                        </td>
                        <td>${entry.value.price}</td>
                        <td>${entry.value.totalPrice}</td>
                        <td class="handle">
                            <a onclick="if(!confirm('您确定要删除${entry.value.name}吗?'))return false" href="cartServlet?action=deleteItem&id=${entry.value.id}">删除</a>
                        </td>
                    </tr>
                </c:forEach>
                </tbody>
            </c:if>
            <c:if test="${empty sessionScope.cart.items}">
                <tbody>
                    <tr>
                        <td colspan="5">
                            <a href="index.jsp" style="color: red;">亲，当前购物车为空！快去添加商品吧！</a>
                        </td>
                    </tr>
                </tbody>
            </c:if>
            <c:if test="${not empty sessionScope.cart.items}">
                <tfoot>
                <tr>
                    <td colspan="5">
                        购物车中共有 <span style="font-size: 20px; color: red; font-weight: bolder">&nbsp;&nbsp;${sessionScope.cart.totalCount}&nbsp;&nbsp;</span> 件商品
                        总金额 <span style="font-size: 20px; color: red;font-weight: bolder">&nbsp;&nbsp;${sessionScope.cart.totalPrice}&nbsp;&nbsp;</span> 元
                        &nbsp;&nbsp;<a onclick="if(!confirm('您确定要清空购物车吗吗?'))return false" href="cartServlet?action=clear">清空购物车</a>&nbsp;&nbsp;
                        &nbsp;&nbsp;<a href="getOrder?action=createOrder">去结账</a>&nbsp;&nbsp;
                    </td>
                </tr>
                </tfoot>
            </c:if>
        </table>
    </div>
    <%@include file="/view/common/footer.jsp"%>

    <script>
        $(function () {
            $(".updateCount").change(function () {
                let val = $(this).val()
                if(val === "") {
                    $(this).val($(this).siblings(".count").val())
                    return;
                }
                if(confirm("您确定要修改该商品的数量吗？")){
                    location.href="cartServlet?action=updateItem&id=" + $(this).siblings(".id").val() + "&count=" + val
                }else {
                    $(this).val($(this).siblings(".count").val())
                }
            })
        })
    </script>
</body>
</html>
